<template >
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row style="margin-top: 15px">
      <el-col :span="9"
        ><el-input
          v-model="queryTxt"
          placeholder="请输入你要查找的书的信息"
          clearable
          class="input-with-select"
          @clear="getBookList"
          @change="getBookList"
        >
          <el-button
            slot="append"
            @click="getBookList()"
            icon="el-icon-search"
          ></el-button> </el-input
      ></el-col>
    </el-row>
    <el-row style="margin-top: 15px">
      <el-table :data="booklist" stripe style="width: 100%">
        <el-table-column prop="id" label="序号" width="100"> </el-table-column>
        <el-table-column prop="bookname" label="书名" width="180">
        </el-table-column>
        <el-table-column prop="sort" label="类别" width="180">
        </el-table-column>
        <el-table-column prop="count" label="售价(元)" width="180">
        </el-table-column>
        <el-table-column
          prop="price"
          label="租赁价格(元)"
          width="150"
        ></el-table-column>
        <el-table-column label="是否可租赁" width="150">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.state" disabled> </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="租赁图书"
              placement="top-start"
            >
              <el-button
                type="primary"
                :disabled="scope.row.state == false"
                @click="addbooks(scope.row)"
                >租赁</el-button
              >
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-size="limit"
        :page-sizes="[3, 6, 9, 12, 15]"
        background
        layout="total,sizes, prev, pager, next,jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @prev-click="handleprev"
        @next-click="handleNext"
      >
      </el-pagination>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      nobook: false,
      unclick: true,
      addDialogVisible: false,
      queryTxt: "",
      booklist: [],
      page: 1,
      limit: 15,
      totalCount: 0,
    };
  },
  created() {
    //首先获取 图书列表
    this.getBookList();
  },
  mounted() {
    //得到登录的用户
    let token = sessionStorage.getItem("token");
    let user = JSON.parse(token);
    console.log(user);
    console.log(user.children);
  },
  /**
   * 
   *
    window.sessionStorage.setItem(
                  "token",
                  JSON.stringify(result.data[0])
                );
   */
  methods: {
    addbooks(row) {
      this.$confirm("是否租赁这本书,", "是否租赁", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let token = sessionStorage.getItem("token");
          let user = JSON.parse(token);
          user.children.push(row);
          this.$http.delete(`users/${user.id}`).then((res) => {
            if (res.status !== 404) {
              this.$http.post("users", user).then(() => {
                //获取时间戳精确到毫秒
                const date = +new Date();
                this.getBookList();
                this.$http.put(`book/${row.id}`, {
                  state: false,
                  sort: row.sort,
                  count: row.count,
                  price: row.price,
                  bookname: row.bookname,
                  head_time: date,
                });
                this.$message({
                type: "info",
                message: "添加成功",
              });
              this.getBookList();
              });
            } else {
              this.$message({
                type: "info",
                message: "添加失败",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消租赁",
          });
        });
      this.getBookList();
    },
    getBookList() {
      let url = `book?_page=${this.page}&_limit=${this.limit}`;
      if (this.queryTxt) {
        url = `book?_page=${this.page}&_limit=${this.limit}&q=${this.queryTxt}`;
      }
      this.$http.get(url).then((res) => {
        this.booklist = res.data;
        this.totalCount = parseInt(res.headers["x-total-count"]);
      });
    },
    // 当单机页数的时候执行
    handleSizeChange(size) {
      this.limit = size;
      this.getBookList();
    },
    //改变每一页显示的条数
    handleCurrentChange(page) {
      this.page = page;
      this.getBookList();
    },
    //单击上一页的时候
    handleprev() {
      this.page -= 1;
      this.getBookList();
    },
    //淡季下一页的时候
    handleNext() {
      this.page += 1;
      this.getBookList();
    },
  },
};
</script>
<style lang="less" scoped>
</style>